<template>
    <div class="HomeIndex">
        <div class="HomeIndexHead">
            <seach class="seach"></seach>
            <Zky_Badge class="Switch" :total="total" @click="skip"></Zky_Badge>
        </div>
        <div class="HomeIndexContent">
            <div class="HomeIndexContentBox" v-if="ChatList.length > 0">
                <div class="HomeIndexContentBoxContent" v-for="item in ChatList" @click="Chat(item.chatListOthersMailbox)">
                    <p>{{ item.chatListNickname }}</p>
                    <p>发送时间：{{ item.chatListTime }}</p>
                    <p><span>{{ item.chatListType == "1" ? "自己" : "对方" }}：</span>
                        <span v-if="item.chatListChatType == 'Text'">{{ item.chatLisOldList }}</span>
                        <span v-else-if="item.chatListChatType == 'Photo'">发送了一张图片</span>
                        <span v-else-if="item.chatListChatType == 'cancel'">对方撤回了一条信息</span>
                        <span v-else-if="item.chatListChatType == 'delete' && item.chatListType == '1'">我删除了一条信息</span>
                    </p>
                    <span class="HomeIndexContentBoxContentSpan" v-if="item.chatListNew == '1'">新消息</span>
                </div>
            </div>
            <div class="HomeIndexContentBox" v-else>
                <Zky_Error :title="'暂无聊天记录'"></Zky_Error>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Axios from '../../Axios/Axios';
import seach from '../../components/seach.vue';
import { ref, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { TimeDetails } from '../../utils/Time';
import { main } from '../../store';
const Mains = main()
Mains.Home = 2
Mains.Buddy = 1
const total = ref(0)
const ChatList = ref([{
    chatListNickname: "",
    chatLisOldList: "",
    chatListTime: "",
    chatListType: "",
    chatListChatType: "",
    chatListOthersMailbox: "",
    chatListNew: ""
}])
const router = useRouter()
watch(() => Mains.WebSocketMessageFlag, async () => {
    await ChatListSelect()
})
onMounted(async () => {
    await ApplyNumber()
    await ChatListSelect()
})
// 点击进入聊天页面
const Chat = (uid: string) => {
    router.push({
        name: "/Chat",
        query: {
            id: uid
        }
    })
}

//初始化页面数据
const ChatListSelect = async () => {
    ChatList.value = []
    const res = await Axios("ChatListSelect")
    if (res.code == 200) {
        ChatList.value = res.data
        if (ChatList.value.length > 0) {
            ChatList.value.forEach(el => {
                el.chatListTime = TimeDetails(new Date(el.chatListTime))
            })
        }
    }
}

// 跳转到申请页面
const skip = () => {
    router.push({
        name: "/ApplyBuddy"
    })
}
// 初始化申请人数
const ApplyNumber = async () => {
    const res = await Axios("ApplyNumber")
    if (res.code == 200) {
        total.value = res.data.total
    }
}
</script>
<style scoped lang="scss">
.HomeIndexContent {
    margin-top: 20px;
    width: 100%;

    .HomeIndexContentBox {
        width: 100%;

        .HomeIndexContentBoxContent {
            cursor: pointer;
            width: 90%;
            background: #fff;
            margin: 20px 0;
            padding: 20px 10px;
            position: relative;
        }
    }
}

.HomeIndexContentBoxContentSpan {
    position: absolute;
    display: inline-block;
    top: 0;
    right: 0;
    background: #53c41c;
    color: #ffffff;
    padding: 10px 12px;
    border-radius: 10px;
    transform: rotate(20deg);
}

.HomeIndexHead {
    display: flex;

    .seach {
        flex: 9
    }

    .Switch {
        flex: 1;
        line-height: 50px;
        padding: 0;
    }
}
</style>